<template>
    <!-- 文章列表组件 -->
    <div class="bbc">
        <!--

            loading是否加载中，默认值false
            finished是否所有数据加载完成，默认值false
                    如果这个值是true，就不会去调用onload函数去加载数据了
            finished-text
            onLoad调接口，拿数据
            list存放列表数据
                实例化组件的时候，会自动调用onload函数直到数据铺满屏幕
        -->
        <van-pull-refresh
            v-model="refreshing"
            @refresh="onRefresh"
            :success-duration="1500"
            success-text="刷新成功"
        >
            <div class="box" ref="articleList">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                    @load="onLoad"
                >
                    <article-item
                        v-for="article in list"
                        :key="article.art_id"
                        :article="article"
                    ></article-item>
                </van-list>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import { getArticles } from "@/api/articles";
import articleItem from "./article-item.vue";
import { throttle } from "lodash";
export default {
    name: "ArticleList",
    components: { articleItem },
    props: {
        ch1: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            timestamp: null,
            error: false, // 是否网络错误
            refreshing: false, // 下拉刷新控件
        };
    },
    mounted() {
        this.$refs.articleList.addEventListener(
            "scroll",
            throttle(function () {
                // 被卷去的距离
                // console.log(this.scrollTop);
                // 保存到自定义属性中去
                this.setAttribute("data-top", this.scrollTop);
            }, 200)
        );
    },
    created () {
        
    },
    // 组件激活后
    activated() {
        // 把自定义属性的值拿下
        this.$refs.articleList.scrollTop =
            this.$refs.articleList.getAttribute("data-top");
    },
    methods: {
        async onLoad() {
            try {
                // 做六件事
                // 先获取数据
                let { data } = await getArticles({
                    channel_id: this.ch1.id, // 频道 id
                    timestamp: this.timestamp || Date.now(),
                    with_top: 1,
                });

                if (Math.random() > 0.9) {
                    // 百分之十的概率报错
                    JSON.parse("abc");
                }
                // 转储
                this.timestamp = data.pre_timestamp;
                this.list.push(...data.results);
                // 3. 把loading是否加载中设置为false
                this.loading = false;
                // 4. 判断还有没有下一页的数据
                if (data.pre_timestamp) {
                    // 6. 如果还有下一页数据就修改分页参数：让下一次调接口的时候获取的时下一页的数据
                    // 下一页的时间戳
                    this.timestamp = data.pre_timestamp;
                } else {
                    // 5. 如果没有下一页的数据就把finished设置为true：表示所有数据已加载完毕
                    // 只要这个属性被设置成 true ，那么就不会再触发这个load函数
                    this.finished = true;
                }
            } catch (error) {
                // 网络错误
                this.error = true;
                this.loading = false;
            }
        },
        onRefresh() {
            // 清空列表数据
            (this.list = []),
                (this.finished = false),
                (this.timestamp = null),
                (this.error = false), // 是否网络错误
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                (this.loading = true);
            this.onLoad();
            this.refreshing = false; // 下拉刷新控件
        },
    },
};
</script>

<style lang="less">
.box {
    margin-top: 88px;
    height: calc(100vh - 188px);
    overflow-y: auto;
    width: 100%;
}
</style>

